<template>
  <view class="list-page">
    <view class="category-scroll">
      <view class="category-scroll-container">
        <scroll-view
          class="category-scroll-view"
          scroll-with-animation
          scroll-x
          :scroll-into-view="'category-list-item-' + currentCategory"
        >
          <view class="category-list">
            <view
              class="category-list-item"
              :class="{ active: currentCategory === 0 }"
              :id="'category-list-item-0'"
              @click="changeCategory(0)"
              >全部</view
            >
            <view
              v-for="(item, index) in category"
              class="category-list-item"
              :class="{ active: currentCategory === item.id }"
              :id="'category-list-item-' + item.id"
              :key="index"
              @click="changeCategory(item.id)"
            >
              {{ item.name }}
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="list-page-body">
      <view class="container">
        <view class="row">
          <view
            class="col-2"
            v-for="(item, index) in list"
          >
            <view
              class="list-item mt-20"
              @click="toDetail(item.id)"
            >
              <div
                class="list-item-tag"
                v-if="item.is_vip"
              >
                vip
              </div>
              <view class="list-item-thumb">
                <image :src="item.thumb" />
              </view>
              <view class="list-item-content">
                <view class="list-item-title">{{ item.name }}</view>
                <view class="list-item-desc"
                  ><text class="iconfont icon-browse mr-5"></text>{{ item.view_count }}</view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
      <comm-tabbar></comm-tabbar>
    </view>
  </view>
</template>

<script>
  export default {
    name: "TutorialIndex",
    data() {
      return {
        category: [],
        currentCategory: 0,
        listSrc: [],
        list: [],
      };
    },
    created() {
      this.category = this.$config.demo.category;
    },
    onShow() {
      console.log("onShow");
      this.currentCategory = this.$storage.get("category_id") || 0;

      this.getList();
    },
    methods: {
      getList() {
        this.$request({
          url: "/list.json",
          method: "GET",
        }).then((res) => {
          let data = this.$utils.reverseArr(res || []);

          this.listSrc = data;
          if (this.currentCategory === 0) {
            this.list = data;
          } else {
            this.list = data.filter((item) => {
              return item.category_id === this.currentCategory;
            });
          }
        });
      },
      toDetail(id) {
        uni.navigateTo({
          url: `/pages/detail/index?id=${id}`,
        });
      },

      changeCategory(id) {
        this.currentCategory = id;
        if (id === 0) {
          this.list = this.$config.demo.list;
          return;
        }
        this.list = this.listSrc.filter((item) => {
          return item.category_id === id;
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .list-page {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    .category-scroll {
      position: relative;
      height: 88rpx;
      flex: 88rpx 0 0;
      &-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        height: 88rpx;
        background: #fff;
      }
    }

    .category-scroll-view {
      height: 88rpx;
    }

    .category-list {
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      &-item {
        padding: 0 $padding;
        //不换行
        height: 88rpx;
        line-height: 88rpx;
        white-space: nowrap;
        &.active {
          color: $color-primary;
          border-bottom: 2px solid $color-primary;
        }
      }
    }

    &-body {
      flex: 1 1 auto;
    }
  }
</style>
